<template>
  <div class="item-content mb-16 lighter">
    <template v-for="(answer_text, index) in answer_text_list" :key="index">
      <div class="avatar">
        <img :src="application.avatar || Avatar" height="32px" width="32px" />
      </div>
      <div :class="`content ${hasFlex ? 'content-flex' : ''}`" @mouseup="openControl">
        <el-card class="mb-8 border-r-8">
          <MdRenderer
            v-if="
              (chatRecord.write_ed === undefined || chatRecord.write_ed === true) &&
              answer_text.length == 0
            "
            :source="$t('chat.tip.answerMessage')"
          ></MdRenderer>
          <template v-else-if="answer_text.length > 0">
            <MdRenderer
              v-for="(answer, index) in answer_text"
              :key="index"
              :chat_record_id="answer.chat_record_id"
              :child_node="answer.child_node"
              :runtime_node_id="answer.runtime_node_id"
              :reasoning_content="answer.reasoning_content"
              :disabled="loading || type == 'log'"
              :source="answer.content"
              :send-message="chatMessage"
            ></MdRenderer>
          </template>
          <span v-else-if="chatRecord.is_stop" shadow="always">
            {{ $t('chat.tip.stopAnswer') }}
          </span>
          <span v-else shadow="always">
            <img src="@/assets/agent/chat/loading.svg" class="loading-img" alt="">
            {{ $t('chat.tip.answerLoading') }}
          </span>
          <!-- 知识来源 -->
          <div v-if="showSource(chatRecord) && index === chatRecord.answer_text_list.length - 1">
            <KnowledgeSource :data="chatRecord" :type="application.type" />
          </div>
          <OperationButton
            v-if="!(loading && isLast && answer_text.length === 0)"
            :type="type"
            :application="application"
            :chatRecord="chatRecord"
            @update:chatRecord="(event: any) => emit('update:chatRecord', event)"
            :loading="loading"
            :start-chat="startChat"
            :stop-chat="stopChat"
            :regenerationChart="regenerationChart"
          ></OperationButton>
        </el-card>
        <div class="flex-between" style="margin-left: 10px">
          <el-button
              type="primary"
              v-if="chatRecord.is_stop && !chatRecord.write_ed"
              @click="startChat(chatRecord)"
              link
          >
            <el-icon style="margin-right: 5px;"><Refresh /></el-icon>
            {{ $t('chat.operation.continue') }}
          </el-button>
          <el-button
              type="primary"
              v-else-if="!chatRecord.write_ed && loading"
              @click="stopChat(chatRecord)"
              link
          >
            <img src="@/assets/agent/chat/tingzhi.svg" style="width: 16px;margin-right: 5px;" alt="">
            {{ $t('chat.operation.stopChat') }}
          </el-button>
        </div>
      </div>
    </template>
  </div>
</template>
<script setup lang="ts">
import KnowledgeSource from '@/components/ai-chat-new/KnowledgeSource.vue'
import MdRenderer from '@/components/markdown/MdRenderer.vue'
import OperationButton from '@/components/ai-chat-new/component/operation-button/index.vue'
import { type chatType } from '@/api/type/application'
import Avatar from '@/assets/agent/avatar.png'
import { computed } from 'vue'
import bus from '@/bus'
const props = defineProps<{
  chatRecord: chatType
  application: any
  loading: boolean
  sendMessage: (question: string, other_params_data?: any, chat?: chatType) => void
  chatManagement: any
  type: 'log' | 'ai-chat' | 'debug-ai-chat'
  isLast: boolean
}>()

const hasFlex = computed(() => !props.loading || (props.chatRecord.is_stop && !props.chatRecord.write_ed) || (!props.chatRecord.is_stop && !props.chatRecord.write_ed) )

const emit = defineEmits(['update:chatRecord'])

const chatMessage = (question: string, type: 'old' | 'new', other_params_data?: any) => {
  if (type === 'old') {
    add_answer_text_list(props.chatRecord.answer_text_list)
    props.sendMessage(question, other_params_data, props.chatRecord)
    props.chatManagement.write(props.chatRecord.id)
  } else {
    props.sendMessage(question, other_params_data)
  }
}
const add_answer_text_list = (answer_text_list: Array<any>) => {
  answer_text_list.push([])
}

const openControl = (event: any) => {
  if (props.type !== 'log') {
    bus.emit('open-control', event)
  }
}

const answer_text_list = computed(() => {
  return props.chatRecord.answer_text_list.map((item) => {
    if (typeof item == 'string') {
      return [
        {
          content: item,
          chat_record_id: undefined,
          child_node: undefined,
          runtime_node_id: undefined,
          reasoning_content: undefined
        }
      ]
    } else if (item instanceof Array) {
      return item
    } else {
      return [item]
    }
  })
})

function showSource(row: any) {
  if (props.type === 'log') {
    return true
  } else if (row.write_ed && 500 !== row.status) {
    if (props.type === 'debug-ai-chat' || props.application?.show_source) {
      return true
    }
  }
  return false
}
const regenerationChart = (chat: chatType) => {
  props.sendMessage(chat.problem_text, { re_chat: true })
}
const stopChat = (chat: chatType) => {
  props.chatManagement.stop(chat.id)
}
const startChat = (chat: chatType) => {
  props.chatManagement.write(chat.id)
}
</script>
<style lang="scss" scoped>
.content-flex {
  display: flex !important;
  align-items: center;
  padding-left: 7px !important;
  .width-150 {
    width: 150px;
  }

}
.content {
  :deep(.el-card) {
    border: none;
    box-shadow: none;
  }
  :deep(.el-card__body) {
    //padding-bottom: 10px;
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  .loading-img {
    animation: rotate 2s linear infinite;
    width: 16px;height: 16px;position: relative; top: 4px;
  }
}
</style>
